<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "@/store";

import { getAPI, postAPI, listAPI } from "@/service/api/common";

import AOS from "aos";
onMounted(() => {
  AOS.init();
});

import Child from "@/components/Child/index.vue";

const router = useRouter();
const route = useRoute();

interface data {
  queryId: string;
  name: string;
  from: object;
}
const data = reactive({
  queryId: route.query.id,
  name: "张三",
  from: {
    name: ""
  }
});

/**
 * @description 回到首页
 */
const goIndex = () => {
  router.push({
    path: "/"
    // name: "Index",
  });
}

/**
 * @description 设置用户数据
 */
const setUserInfo = (name: string) => {
  data.name = name;
}
/**
 * @description 测试方法
 */
const test = (child: string) => {
  console.log("测试方法", child);
}

/**
 * @description 请求接口
 */
const get = () => {
  getAPI({ id: data.queryId, name: data.name })
    .then(res => {
      console.log(res);
    })
    .catch(e => {
      console.log(e);
    })
    .finally(() => { });
}
const post = () => {
  postAPI({ id: data.queryId, name: data.name })
    .then(res => {
      console.log(res);
    })
    .catch(e => {
      console.log(e);
    })
    .finally(() => { });
}
const list = () => {
  listAPI({})
    .then(res => {
      console.log(res);
    })
    .catch(e => {
      console.log(e);
    })
    .finally(() => { });
}

/**
 * @description 输出store中的数据
 */
const conStoreData = () => {
  // 使用actions中的方法
  store.dispatch("Test");

  // 使用state中的数据
  console.log(store.getters.test);
}
</script>

<template>
  <div class="container">
    <Child :str="'我是子组件'" @test="test"></Child>

    <span class="color-hong fs18">全局样式测试（全局变量、mixin、include）</span>
    <span>阿里图标测试</span>
    <span class="iconfont icon-24px"></span>
    <span>ElementPlus测试</span>
    <el-icon size="20" color="#333">
      <Edit />
    </el-icon>
    <el-button @click="get">请求get接口</el-button>
    <el-button @click="post">请求post接口</el-button>
    <el-button @click="list">请求数据列表</el-button>
    <span>AOS测试</span>
    <span data-aos="fade-up" style="width: 100px; height: 100px; background-color: red"></span>
    <span>数据测试</span>
    <span>queryId: {{ data.queryId }}</span>
    <span>name: {{ data.name }}</span>
    <span>store.getters.userInfo.name: {{ store.getters.userInfo.name }}</span>
    <el-button @click="goIndex">回到首页</el-button>
    <el-input v-model="data.from.name" style="width: 240px" placeholder="Please name" />
    <el-button @click="setUserInfo(data.from.name)">设置用户数据</el-button>
    <el-button @click="conStoreData">输出store中的数据</el-button>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.color-hong {
  color: $color-hong;
}

.fs18 {
  @include font-size18;
}
</style>
